<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-width="date.width">

      <el-form-item :label="v.label" :prop="v.prop" v-for="(v,i) in date.items" :key="i" >
      <el-input v-model="ruleForm[v.prop]" :placeholder="v.placeholder" v-if="v.type=='Input'" :style="{width:v.width}"></el-input>
      <el-select v-model="ruleForm[v.prop]" :placeholder="v.placeholder" v-if="v.type=='Select'">
        <el-option :label="key.label" :value="key.value" v-for="(key,i) in v.option" :key="i"></el-option>
      </el-select>
      
      <el-switch v-model="ruleForm[v.prop]" v-if="v.type=='Switch'"></el-switch>
      <el-checkbox-group v-model="ruleForm[v.prop]" v-if="v.type=='Checkbox'">
        <el-checkbox :label="item.value" :name="v.prop" v-for="(item,i) in v.checkbox" :key="i">{{item.label}}</el-checkbox>
      </el-checkbox-group>

      <el-radio-group v-model="ruleForm[v.prop]" v-if="v.type=='Radio'">
        <el-radio :label="item.value"  v-for="(item,i) in v.radio" :key="i">{{item.label}}</el-radio>
    </el-radio-group>

    <el-col :span="v.span">
      <el-input :type="v.prop" v-model="ruleForm[v.prop]" v-if="v.type=='Text'"  :placeholder="v.placeholder"></el-input>
    </el-col>

    <el-col :span="v.span || 11">
      <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm[v.prop]" style="width: 100%;" v-if="v.type=='Date'"></el-date-picker>
    </el-col>
    <el-col :span="v.span || 11">
      <el-time-picker placeholder="选择时间" v-model="ruleForm[v.prop]" style="width: 100%;" v-if="v.type=='Time'"></el-time-picker>
    </el-col>

    <el-col :span="v.span || 11">
      <el-date-picker type="datetime" placeholder="选择日期" v-model="ruleForm[v.prop]" style="width: 100%;" v-if="v.type=='Datetime'"></el-date-picker>
    </el-col>
      </el-form-item>

    
  

  
  <el-form-item>
    <el-button :type="item.type" @click="selfCall('ruleForm',item.action,item.call)" v-for="(item,i) in date.buttons" :key="i">{{item.label}}</el-button>
    <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
  </el-form-item>


</el-form>

  </div>
</template>

<script>
  export default {
    props:{
      date:{
        type: Object,
        required:true
      }
    },
    
    data() {
      return {
        ruleForm: {
          
        },
        rules: {
          
        }
      };
    },
    methods: {
      selfCall(ruleForm,action,callback){
        if(action == 'submit'){
          this.submitForm(ruleForm,callback)
        }else if(action=='reset'){
          this.resetForm(ruleForm)
        }else{
          callback && callback()
        }
      },
      submitForm(formName,callback) {
        console.log(this.$refs.formName)
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
            callback && callback(this.ruleForm)
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      init(){
        let formData = {}
        let box = []
        this.date.items.forEach(v=>{
          switch(v.type){
            case 'Checkbox':
              
              if (v.default) {
                if(Array.isArray(v.default)){
                  box.concat(v.default)
                }else{
                  box.push(v.default)

                }
              }
              formData[v.prop]=box
            break
           case 'Date':
           case 'Time':
           case 'Datetime':
            if(v.default){
              formData[v.prop] = new Date(v.default)

            }
           break

            default:
              formData[v.prop]=v.default
              break
          }
          
        })
        this.ruleForm = formData
        this.rules = this.date.rules
      }
    },
    created(){
      this.init()
    }
  }
</script>

<style>

</style>
